<template>
	<view class="news">
		<nav-bar title="消息" :showLeftIcon="false" :leftSlot="false"></nav-bar>
		<you-tabs :tabsList="tabList" :activeName="activeName" tabActiveColor="#325EF5" bottomLineColor="#325EF5"
			@tabClick="clickTabItem">
		</you-tabs>
		<scroll-view scroll-y :style="{height: scrollHeight}" class="list-box" @scrolltolower="loadMore">
			<view v-for="(item,index) in itemLists" :key="index" class="list-item" @click="toDetail(item)">
				<view class="status-show">
					<view class="status">
						<image :src="imgaes[item.informType - 1]" mode="widthFix"></image>
						<text>
							{{item.informType===1?'订单通知':'检测报告'}}
						</text>
					</view>
					<text>{{item.time}}</text>
				</view>
				<view class="title">
					<view class="read" v-if="item.ifRead == 2"></view>
					<text>{{item.title}}</text>
				</view>
				<text class="describe">{{item.content}}</text>
				<!-- <view class="view-details" @click="toDetail(item)">
					<text>查看详情</text>
					<image :src="baseImgUrl+ 'home/message_arrow.png'" mode="widthFix"></image>
				</view> -->
			</view>
			<view class="list_loading" v-if="isAllData != 0">
				<view class="loading" v-if="isAllData == '1'">
					正在加载，请稍候
					<uni-icons type="spinner-cycle" size="16" style="margin-left: 4px;"></uni-icons>
				</view>
				<view class="all-data" v-else>已加载全部数据~</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import Message from '@/api/message.js'
	import pageConfig from '@/config'
	const baseUrl = pageConfig.baseUrl,
		baseImgUrl = pageConfig.baseImgUrl;
	export default {
		data() {
			return {
				baseUrl,
				baseImgUrl,
				itemLists: [],
				scrollHeight: '',
				tabList: [
					// {
					// 	label: '全部',
					// 	name: ''
					// },
					{
						label: '订单通知',
						name: '1'
					},
					{
						label: '检测报告',
						name: '2'
					}
				],
				activeName: '1',
				imgaes: [
					baseImgUrl + 'news/orderNotice.png',
					baseImgUrl + 'news/testReport.png',
					baseImgUrl + 'news/safetyLoophole.png'
				],
				total: 0,
				pageInfo: {
					pageNum: 1,
					pageSize: 10
				},
				isAllData: '0'
			}
		},
		onLoad() {
			this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 95 + 'px';

		},
		onShow() {
			this.itemLists = [];
			this.listChange()
		},
		methods: {
			clickTabItem(value) {
				this.activeName = value;
				this.itemLists = [];
				this.total = 0;
				this.pageInfo = {
					pageNum: 1,
					pageSize: 10
				};
				this.listChange();
			},
			listChange() {
				this.isAllData = '1'
				let params = {}
				if (this.activeName == 2) {
					params = {
						informType: this.activeName,
						clientId: uni.getStorageSync('wbEntAuthId') || ''
					}
				} else {
					params = {
						informType: this.activeName
					}
				}
				Message.getMassageList(params).then(res => {
					this.itemLists.push(...res.rows);
					this.total = res.total;
					let {
						pageNum,
						pageSize
					} = this.pageInfo;
					if (pageNum >= this.total / pageSize) {
						this.isAllData = '2';
					} else {
						this.isAllData == '0';
					}
				})
			},
			loadMore() {
				console.log("loadmore")
				let {
					pageNum,
					pageSize
				} = this.pageInfo;
				if (pageNum >= this.total / pageSize) {
					this.isAllData = '2';
					return;
				}
				this.$set(this.pageInfo, 'pageNum', pageNum + 1);
				this.listChange();
			},
			toDetail(item) {
				Message.massageToDetail({
					ifRead: 1,
					id: item.id
				}).then(res => {
					// 1 维修订单    2 师傅维修单
					// uni.navigateTo({
					// 	url: "/subPages/home/master/reqairDetail?id=" + item.relevantBillsId + '&type=1'
					// })
					if (item.informType === 1) {
						uni.navigateTo({
							url: '/subPages/home/maintenanceRecords'
						})
					} else {
						uni.navigateTo({
							url: '/subPages/home/maintenanceRecordsCheck'
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.news {
		width: 100%;
		height: 100%;

		.list-box {
			padding: 20rpx 30rpx;

			.list-item {
				background: #ffffff;
				padding: 20rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.status-show {
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;
					border-bottom: 2rpx solid #f6f8fa;
					display: flex;
					justify-content: space-between;

					&:last-child {
						margin: 0;
						margin-top: 20rpx;
					}

					>text {
						font-size: 24rpx;
						font-style: normal;
						font-weight: 400;
						line-height: 40rpx;
						opacity: 0.4;
					}

					.status {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: 500;
						opacity: 1;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
					}
				}

				.title {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-style: normal;
					font-weight: 500;
					line-height: 40rpx;
					opacity: 0.9;
					margin-bottom: 10rpx;

					.read {
						width: 12rpx;
						height: 12rpx;
						margin: 12rpx;
						border-radius: 50%;
						background: #ff4a4a;
					}
				}

				.describe {
					display: flex;
					font-size: 24rpx;
					font-style: normal;
					font-weight: 400;
					line-height: 40rpx;
					opacity: 0.4;
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;
					border-bottom: 2rpx solid #cccccc;
				}

				.view-details {
					display: flex;
					justify-content: space-between;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>